<template>
  <div>
    <div>
      <!-- 页头 -->
      <div class="back">
        <i class="el-icon-back" @click="$router.go(-1)"></i>
        <span style="padding: 10px; color: rgba(0, 0, 0, 0.15)">|</span>
        <span style="font-size: 20px; font-weight: 500; color: #2f343e"
          >编辑监管业务知识</span
        >
      </div>
      <!-- 主题 -->
      <div class="box-top">
        <div
          style="
            font-size: 16px;
            color: rgba(0, 0, 0, 0.85);
            font-weight: 550;
            margin-bottom: 20px;
          "
        >
          基本信息
        </div>
        <el-form
          ref="form"
          :model="formData"
          :rules="rules"
          label-width="120px"
          label-position="left"
        >
          <el-form-item label="名称:" style="margin-left: 92px">
            <el-input
              v-model="formData.name"
              placeholder="请输入"
              style="width: 1020px; margin-left: 0px"
            />
          </el-form-item>
          <div style="display: flex">
            <div class="content-box-left">
              <el-form-item label="级别：">
                <el-select
                  v-model="formData.cronType"
                  placeholder="请选择级别"
                  style="width: 370px; margin-left: 0px"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="处置状态：">
                <el-select
                  v-model="formData.cycleTime"
                  placeholder="请选择处置状态"
                  style="width: 370px; margin-left: 0px"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="content-box-right">
              <el-form-item label="类别:">
                <el-select
                  v-model="formData.type"
                  placeholder="请选择类别"
                  style="width: 370px; margin-left: 0px"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="来源:">
                <el-select
                  v-model="formData.type"
                  placeholder="请选择来源"
                  style="width: 370px; margin-left: 0px"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
          <el-form-item
            label="事件详情:"
            style="margin-left: 92px; width: 1140px"
          >
            <el-input
              type="textarea"
              :rows="5"
              :cols="10"
              v-model="formData.cycleNode"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 中间盒子 -->
      <div class="box-content">
        <div
          style="
            font-size: 16px;
            color: rgba(0, 0, 0, 0.85);
            font-weight: 550;
            margin-bottom: 20px;
          "
        >
          处置信息
        </div>
        <el-form
          ref="form"
          :model="formData"
          :rules="rules"
          label-width="120px"
          label-position="left"
        >
          <el-form-item
            label="危害程度评估:"
            style="margin-left: 92px; width: 1140px"
          >
            <el-input type="textarea" :rows="10" :cols="10"></el-input>
          </el-form-item>
          <el-form-item
            label="事件成因:"
            style="margin-left: 92px; width: 1140px"
          >
            <el-input type="textarea" :rows="10" :cols="10"></el-input>
          </el-form-item>
          <el-form-item
            label="事件过程:"
            style="margin-left: 92px; width: 1140px"
          >
            <el-input type="textarea" :rows="10" :cols="10"></el-input>
          </el-form-item>
          <el-form-item
            label="处置措施:"
            style="margin-left: 92px; width: 1140px"
          >
            <el-input type="textarea" :rows="10" :cols="10"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$router.go(-1)">取 消</el-button>
      <el-button type="primary" @click="$router.go(-1)">提 交</el-button>
    </div>
  </div>
</template>
<script>
import HkTable from "@/components/HKTable";

export default {
  components: { HkTable },
  data() {
    return {
      cycleNodeOption: [],
      formData: {
        name: "运维人员使用不合规设备执行运维操作",
        cronType: "一般",
        type: "运维行为异常",
        cycleTime: "未处置",
        timeNode: "新疆维吾尔自治区行政监管平台",
        cycleNode:
          " 发现运维人员工单处置不规范-运维人员在工作时间执行可能影响正常业务的操作，系统名称:泓科主机监控与审计系统，访问地址:http://192.168.1.217/zs/login,于2023-03-16 17:49:28执行备份操作,且无运维工单触发。当前操作的登录账号admin,登录终端地址: IP:175.9.228.112,责任人:刘宏远,责任部门:运维科,该操作在工作时间(8:00-17:30)执行可能影响正常业务访问",
      },
      // 表单参数
      rules: {
        name: [
          { required: true, message: "作业名称不能为空", trigger: "blur" },
        ],
        type: [{ required: true, message: "请选择作业类型", trigger: "blur" }],
        cycleTime: [{ required: true, message: "请选择", trigger: "blur" }],
        timeNode: [{ required: true, message: "请选择", trigger: "blur" }],
        day: [{ required: true, message: "请选择", trigger: "blur" }],
        times: [{ required: true, message: "请选择", trigger: "blur" }],
      },
      //   表头名称
      tableLabelList: [
        { label: "来源", param: "name", type: "slot", width: "240px" },
        {
          label: "分类",
          param: "datasourceName",
          type: "slot",
          width: "240px",
        },
        {
          label: "家族",
          param: "outputDatasourceName",
          type: "slot",
          width: "240px",
        },
        { label: "组织", param: "people", type: "slot" },
      ],
      arrList: [
        {
          name: "",
          datasourceName: "",
          outputDatasourceName: "",
          people: "",
        },
      ],
      // 域名
      tableNameList: [
        { label: "域名", param: "name", type: "slot", width: "650px" },
        { label: "发现时间", param: "people", type: "slot" },
      ],
      nameList: [
        {
          name: "",
          datasourceName: "",
          outputDatasourceName: "",
          people: "",
        },
      ],
      // URL
      tableUrlList: [
        { label: "URL", param: "name", type: "slot", width: "420px" },
        {
          label: "威胁等级",
          param: "datasourceName",
          type: "slot",
          width: "230px",
        },

        { label: "扫描时间", param: "people", type: "slot" },
      ],
      urlList: [
        {
          name: "",
          datasourceName: "",
          outputDatasourceName: "",
          people: "",
        },
      ],
      // 样本
      tableBookList: [
        { label: "HASH", param: "name", type: "slot", width: "420px" },
        {
          label: "威胁等级",
          param: "datasourceName",
          type: "slot",
          width: "230px",
        },
        { label: "检测时间", param: "people", type: "slot" },
      ],
      bookList: [
        {
          name: "",
          datasourceName: "",
          outputDatasourceName: "",
          people: "",
        },
      ],
    };
  },
};
</script>

<style scoped lang="scss">
.back {
  margin-bottom: 20px;
}
.box-top {
  background-color: #ffffff;
  padding: 20px;
  margin-bottom: 20px;
  .content-box-left {
    margin-left: 92px;
  }
  .content-box-right {
    margin-left: 160px;
  }
}
.box-content {
  background-color: #ffffff;
  padding: 20px;
  margin-bottom: 20px;
  // height: 220px;
}
.box-content1 {
  background-color: #ffffff;
  padding: 20px;
  // margin-bottom: 20px;

  height: 200px;
}
.son-panel {
  display: flex !important;
}
::v-deep [data-v-1c51fe52] .el-textarea__inner {
  height: 120px;
}
.dialog-footer {
  margin-top: 100px;
  display: flex;
  justify-content: flex-end;
  background-color: #ffffff;
  padding: 14px 20px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
::v-deep {
  .el-form-item--medium .el-form-item__content {
    margin-bottom: 20px;
  }
  .box-top[data-v-1a8a03f8] {
    padding-bottom: 11px;
  }
  .el-input--medium .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
  .el-form-item__content {
    line-height: 0px;
  }
  .el-pagination {
    display: NONE;
  }
  .el-form-item--medium .el-form-item__label {
    margin-top: -2px;
  }
  .el-table th.el-table__cell > .cell {
    padding-left: 37px;
  }
  .el-textarea__inner {
    resize: none;
  }
  .el-input--medium .el-input__icon {
    margin-left: 153px;
  }
}
</style>
